<template>
  <div class="main">
    <div class="back-head">
      <img src="../assets/img/touxiang.png" alt="" />
    </div>
    <div class="detail-card">
      <div class="head">
        <img src="../assets/img/touxiang.png" alt="" />
      </div>
      <div style="display: flex; align-items: center; margin: 0 16px 30px 0">
        <div class="fake-head"></div>
        <p class="name">薛定谔的猫</p>
        <div style="margin-right: auto"></div>
        <div class="give-reward">
          <div>打赏</div>
        </div>
      </div>
      <img src="../assets/img/biography.png" class="biography" alt="" />
      <p class="title">个人简介</p>
      <p class="content">
        此诗思想内容非常深沉，艺术表现非常成熟，在同题作品中影响最大。诗人豪饮高歌，借酒消愁，抒
        发了忧愤深广的人生感慨。诗中交织着失望与自信
        、悲愤与抗争的情怀，体现出诗人强烈的豪纵狂放
        的个性。全诗情感饱满，无论喜怒哀乐，其奔涌迸
        发均如江河流泻，不可遏止，且起伏跌宕，变化剧
        烈；在手法上多用夸张，且常以巨额数词修饰，既
        表现出诗人豪迈洒脱的情怀，又使诗作本身显得笔
        墨酣畅，抒情有力；在结构上大开大阖，张弛有度，
        充分体现了李白七言歌行的豪放特色。
      </p>
    </div>
    <div class="back-footer">
      <div class="tran"></div>
      <img src="../assets/img/backfooter.png" alt="" />
    </div>
    <div class="footer">
      <div class="menu">
        <svg-icon name="visitor" h="16px" w="16px"></svg-icon>
        <p>访客</p>
      </div>
      <div class="menu">
        <svg-icon name="log" h="16px" w="16px"></svg-icon>
        <p>日志</p>
      </div>
      <div class="menu-img">
        <svg-icon name="image" h="18px" w="18px"></svg-icon>
        <div style="margin-left: 8px">
          <p>相册</p>
          <p>相册</p>
          <p>相册</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main {
  .back-head {
    top: 0;
    position: absolute;
    z-index: -1;
    img {
      filter: blur(4px);
      width: 100%;
    }
  }
  .detail-card {
    margin: 200px 16px 0 16px;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(#dedeff, #fff, #fff, #fff);
    position: relative;
    .name {
      font-size: 16px;
    }
    .head {
      height: 80px;
      width: 80px;
      border-radius: 7px;
      overflow: hidden;
      left: 16px;
      top: -20px;
      border: 1px solid #fff;
      position: absolute;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .fake-head {
      height: 60px;
      width: 80px;
      margin-right: 32px;
    }
    .biography {
      width: 70%;
      position: absolute;
      top: 80px;
      left: 16px;
    }
    .title {
      font-weight: 600;
      font-size: 15px;
      margin-left: 16px;
      margin-bottom: 10px;
    }
    .give-reward {
      height: 30px;
      width: 70px;
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 15px;
        z-index: 1;
      }
      &::before {
        background: #30f8e4;
        top: -2px;
        left: -2px;
      }
      &::after {
        background: #eb2f87;
        bottom: -2px;
        right: -2px;
      }
      div {
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: 15px;
        background: #5657f8;
        z-index: 2;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        line-height: 30px;
        letter-spacing: 2px;
      }
    }
    .content {
      color: #888888;
      margin: 0 16px;
      font-size: 10px;
      font-weight: 300;
    }
  }
  .back-footer {
    position: absolute;
    bottom: -120px;
    z-index: -1;
    .tran {
      position: absolute;
      bottom: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(#fff, transparent, transparent);
    }
    img {
      width: 100%;
    }
  }
  .footer {
    display: flex;
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0;
    .menu {
      height: 100%;
      width: calc((100% - 100% * 0.4) / 2);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      .svg-icon {
        margin-right: 8px;
      }
      p {
        font-size: 16px;
        font-weight: 300;
      }
    }
    .menu-img {
      height: 100%;
      width: calc(100% * 0.4);
      background: #5657f8;
      display: flex;
      justify-content: center;
      align-items: center;
      // .menu-img-icon {
      //   height: 18px;
      //   width: 18px;
      // }
      p {
        font-size: 18px;
      }
      p:nth-child(1) {
        color: #eb2f87;
        transform: translateY(1px);
        position: absolute;
      }
      p:nth-child(2) {
        color: #30f8e4;
        transform: translatey(-1px);
        position: absolute;
      }
      p:nth-child(3) {
        color: #fff;
      }
    }
  }
}
</style>